<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Brave Responsive Business Template</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]>
        <link rel="stylesheet" href="stylesheets/ie7.css">
    <![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    <!-- Fonts
	================================================== -->
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
</head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline"><div class="headerline"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <div class="tiledbackground"></div>
    <!--img src="images/bg.jpg" alt="" id="background" /-->
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index-2.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">HOME<br/><span>Info About Us</span></a>
                            <ul>  
                                <li><a href="index-2.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Another Layout Example</a></li>
                                <li><a href="index_noslider.html">No Slider</a></li>
                            </ul>
                        </li>
                        <li><a href="#">FEATURES<br/><span>What We Offer</span></a>
                            <ul> 
                            	<li><a href="page_about.html">About / Services</a></li>
                            	<li><a href="page_pricing.html">Pricing</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_faq.html">FAQ</a></li>
                                <li><a href="page_full.html">Full Page & Background Image</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">PORTFOLIO<br/><span>See Our Work</span></a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio Full</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">BLOG<br/><span>Latest News</span></a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">CONTACT<br/><span>Get In Touch</span></a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post">
                    <select>
                        <option value="">Navigation</option>
                    </select>
				</form>
				
            </div>
		</div>
        
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>The finest of Avant-Garde Web Design.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                    <li><a href="#" class="social_linkedin"></a><div>LinkedIn</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                </ul>
			</div>
            <!--div class="pagetitlebackground"></div-->
        </div>
		
        <!-- Slider
		================================================== -->
        
		<div class="homeslider row">        
            <div class="flexslider clearfix">
                <ul class="slides">
                    <li><a href="http://themeforest.net/item/brave-responsive-business-wordpress-theme/2139911" target="_blank"><img src="images/banner/banner1.jpg" alt="" /></a><div class="flex-caption"><strong>An HTML 5 Valid Template.</strong> You can also grab the <a href="http://themeforest.net/item/brave-responsive-business-wordpress-theme/2139911" target="_blank">WordPress Version here</a>!</div></li>
                    <li><img src="images/banner/banner2.jpg" alt="" /></li>
                    <li><img src="images/banner/banner3.jpg" alt="" /><div class="flex-caption">We hope you enjoy this Template. Make sure to checkout all included pages!</div></li>
                </ul>
            </div>
            <div class="sliderspacefix"></div>
		</div>
        
        <!-- Text Block
		================================================== -->
        
		<div class="eleven columns row left textblock">
            
            <!-- Content Tabs -->

            <div class="one_third">
            	<h5 class="teaserheadline"><img src="images/icons/clock.png" alt="" />Timely Support</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p> 
            </div>
            <div class="one_third">
            	<h5 class="teaserheadline"><img src="images/icons/cog.png" alt="" />Many Settings</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p> 
            </div>
            <div class="one_third lastcolumn">
            	<h5 class="teaserheadline"><img src="images/icons/ipad.png" alt="" />Responsive</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p> 
            </div><div class="clear"></div>
              
            <div class="clear"></div>
        </div>
        
        <!-- Sidebar
        ================================================== -->

        <div class="four columns sidebar offset-by-one textblocksidebar">
            
            <div class="widget">
                <h5>BROCHURE DOWNLOAD</h5>
                <div class="pdfdownload">   
                    <a href="#" class="link"><img src="images/icons/pdf.png" class="left" alt="" />
                    <p>Dowload our 2012 Company Brochure in PDF Format</p></a>
                </div>
                <div class="clear"></div>
            </div>

            <div class="clear"></div>
        </div>
        
        <!-- Portfolio Teasers
		================================================== -->
        
        <div class="sixteen columns row divide">
        	<h3 class="titledivider">Latest Projects</h3>
            <div class="rightlink"><a href="#" class="titlelink"><span style="font-size:13px;">&rarr;</span> See Whole Portfolio</a></div>
            <div class="dividerline"></div>
        </div>
        
        <div class="sixteen columns row portfolio_filter">
        	<ul>
                <li><a class="portfolio_selector" data-group="all-group" href="#">All Projects</a></li>
                <li><a class="portfolio_selector" data-group="web-group" href="#">Web Design</a></li>
                <li><a class="portfolio_selector" data-group="photoshop-group" href="#">Photoshop</a></li>
                <li><a class="portfolio_selector" data-group="concepts-group" href="#">Concepts</a></li>
                <li><a class="portfolio_selector" data-group="print-group" href="#">Print Design</a></li>
            </ul>
        </div><div class="clear"></div>
        
		<div class="sixteen columns row teasers portfolio">
        
        	<div class="four columns teaser all-group web-group">
               <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser1.jpg" alt="" class="scale-with-grid" /></a>
			   <div class="topline"><a href="#">Element</a></div>
			   <div class="subline"><a href="#">Web Design</a></div>
            </div>
			<div class="four columns teaser all-group photoshop-group">
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser2.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Colors</a></div>
				<div class="subline"><a href="#">Photoshop</a></div>
            </div>
			<div class="four columns teaser all-group concepts-group">
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser3.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Vision</a></div>
				<div class="subline"><a href="#">Conception</a></div>
            </div>
            <div class="four columns teaser all-group print-group">
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser4.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Wolf</a></div>
				<div class="subline"><a href="#">Miscellaneous</a></div>
            </div>
            <div class="four columns teaser all-group web-group">
               <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser5.jpg" alt="" class="scale-with-grid" /></a>
			   <div class="topline"><a href="#">Zebra</a></div>
			   <div class="subline"><a href="#">Web Design</a></div>
            </div>
			<div class="four columns teaser all-group photoshop-group">
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser6.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Rainy</a></div>
				<div class="subline"><a href="#">Photoshop</a></div>
            </div>
			<div class="four columns teaser all-group concepts-group">
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser7.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Andaur Studios</a></div>
				<div class="subline"><a href="#">Conception</a></div>
            </div>
            <div class="four columns teaser all-group print-group">
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser8.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Purple Dreams</a></div>
				<div class="subline"><a href="#">Miscellaneous</a></div>
            </div>

			<div class="clear"></div>
		</div><div class="clear"></div> 
        
        <!-- Clients
		================================================== -->
        
        <div class="sixteen columns row divide">
        	<h3 class="titledivider">Our Clients</h3>
            <div class="rightlink"><a href="#" class="titlelink"><span style="font-size:13px;">&rarr;</span> More Clients</a></div>
            <div class="dividerline"></div>
        </div>
        
		<div class="sixteen columns row">
        
        	<p>Interest in working with us? &nbsp; &nbsp; <a href="#" class="linkbg">Get In Touch</a></p>
        	
            <ul class="clients">
        		<li><a href="#"><img src="images/clients/client1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/clients/client2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/clients/client3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/clients/client4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/clients/client5.jpg" alt="" /></a></li>
			</ul>
            
			<div class="clear"></div>
		</div><div class="clear"></div>
		
      <!-- Bottom Padding Adjust
       ================================================== --> 
       <div class="sixteen columns bottomadjust"></div>
            
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap">
    
    	<div class="footerclose"></div>
    
        <div class="footer">
        	<div class="sixteen columns">

                
                <div class="four columns clearfix widget alpha">
                   <h5>LATEST TWEETS</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <div class="four columns widget">
                    <h5>POPULAR BLOG POSTS</h5>
                    <div class="widget_blogposts">
                        <ul>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Pretty Widgets</a></div>
                                <div class="subline">January 23, 2012</div>
                            </li>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Convenient Structure</a></div>
                                <div class="subline">January 21, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Another Blog Post</a></div>
                                <div class="subline">January 17, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Responsive Layout</a></div>
                                <div class="subline">January 3, 2012</div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                          
                <div class="four columns widget">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <span class="lighti">Company Location</span><br/>
                        Brave Studios, Cologne City Branch<br/>
                        Mainstreet 123<br/>
                        50600, Cologne, Germany<br/><br/>
                        
                        <span class="lighti">How To Contact Us</span><br/>
                        Email: <a href="mailto:your@email.com" class="linkbg">info@yourdomain.com</a><br/>
                        Phone: 800.123.4567<br/><br/>
                        
                        <span class="lighti">Office Hours</span><br/>
                        Mondays-Friday: 09:00 - 18:00<br/>
                        Saturday: 10:00 - 15:00
                    </div>
                </div>

                <div class="four columns widget omega">
                    <h5>QUICK CONTACT</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#">
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onFocus="if(this.value == 'Name *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Name *'; }" value='Name *'/>
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onFocus="if(this.value == 'Email *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Email *'; }" value='Email *'/>
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onFocus="if(this.value == 'Message *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send</button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div><div class="clear"></div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap">
    
    	<div class="footeropen"></div>
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>

<!-- End Document
================================================== -->
<div style="display:none"></div>
</body>
</html>